@smui/line-ripple

Svelte Material UI - Line Ripple

Line ripples are used to highlight input elements above them.

Installation

You won't generally need to install this package, unless you're manually creating text fields.

npm install --save-dev @smui/line-ripple

Demo

See it in action.

See the demo code.

Whoa There, These Docs are Outdated

The latest SMUI v3 had a lot of changes, and these docs haven't been caught up yet. You should check out the demo page's code to see the latest usage.

Basic Usage

<!--
  Normally you wouldn't provide a line ripple, but you can manually set up a
  textfield like this:
-->
<Textfield>
  <Input bind:value={name} id="name-input" />
  <FloatingLabel for="name-input">Name</FloatingLabel>
  <LineRipple />
</Textfield>

<script>
  import Textfield, { Input } from '@smui/textfield';
  import FloatingLabel from '@smui/floating-label';
  import LineRipple from '@smui/line-ripple';

  let name = '';
</script>

Exports

todo...

More Information

See Text fields in the Material design spec.

See Line Ripple in MDC-Web for information about the upstream library's architecture.

Changelog

4.2.0 (2021-05-05)

Bug Fixes

• events with modifiers called once for every event listener on event (4234efa)
• textfield layout (0ff4b00), closes #241

Features

• allow customizing Label component, add Em and Strong elemental components (5dd42e2)